/*
 * ===========================================
 * WX Web 基础设计系统
 * ===========================================
 * 定义项目的基础设计语言
 * 这些变量不依赖主题，是整个设计系统的基础
 */

:root {
	/* ===========================================
	 * 1. 基础色彩系统
	 * =========================================== */

	/* 主品牌色 */
	--brand-primary: #3b82f6; /* 主品牌色 - 天蓝色 */
	--brand-primary-50: #eff6ff; /* 品牌色-50 */
	--brand-primary-100: #dbeafe; /* 品牌色-100 */
	--brand-primary-200: #bfdbfe; /* 品牌色-200 */
	--brand-primary-300: #93c5fd; /* 品牌色-300 */
	--brand-primary-400: #60a5fa; /* 品牌色-400 */
	--brand-primary-500: #3b82f6; /* 品牌色-500 (主色) */
	--brand-primary-600: #2563eb; /* 品牌色-600 */
	--brand-primary-700: #1d4ed8; /* 品牌色-700 */
	--brand-primary-800: #1e40af; /* 品牌色-800 */
	--brand-primary-900: #1e3a8a; /* 品牌色-900 */

	/* 语义色彩 */
	--color-success: #10b981; /* 成功 - 绿色 */
	--color-success-light: #ecfdf5; /* 成功浅色背景 */
	--color-warning: #f59e0b; /* 警告 - 橙色 */
	--color-warning-light: #fffbeb; /* 警告浅色背景 */
	--color-error: #ef4444; /* 错误 - 红色 */
	--color-error-light: #fef2f2; /* 错误浅色背景 */
	--color-info: #3b82f6; /* 信息 - 蓝色 */
	--color-info-light: #eff6ff; /* 信息浅色背景 */

	/* 中性色彩系统 (灰度) */
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2937;
	--gray-900: #111827;

	/* 纯色 */
	--color-white: #ffffff;
	--color-black: #000000;

	/* ===========================================
	 * 2. 字体系统
	 * =========================================== */

	/* 字体族 */
	--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	--font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
		Consolas, 'Courier New', monospace;

	/* 字体大小 */
	--font-size-xs: 0.75rem; /* 12px */
	--font-size-sm: 0.875rem; /* 14px */
	--font-size-base: 1rem; /* 16px */
	--font-size-lg: 1.125rem; /* 18px */
	--font-size-xl: 1.25rem; /* 20px */
	--font-size-2xl: 1.5rem; /* 24px */
	--font-size-3xl: 1.875rem; /* 30px */
	--font-size-4xl: 2.25rem; /* 36px */
	--font-size-5xl: 3rem; /* 48px */
	--font-size-6xl: 3.75rem; /* 60px */

	/* 字体粗细 */
	--font-weight-thin: 100;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	/* 行高 */
	--line-height-none: 1;
	--line-height-tight: 1.25;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 2;

	/* ===========================================
	 * 3. 间距系统 (基于 4px 网格)
	 * =========================================== */

	--space-0: 0;
	--space-1: 0.25rem; /* 4px */
	--space-2: 0.5rem; /* 8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-10: 2.5rem; /* 40px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	--space-20: 5rem; /* 80px */
	--space-24: 6rem; /* 96px */
	--space-32: 8rem; /* 128px */

	/* ===========================================
	 * 4. 圆角系统
	 * =========================================== */

	--radius-none: 0;
	--radius-sm: 0.125rem; /* 2px */
	--radius-base: 0.25rem; /* 4px */
	--radius-md: 0.375rem; /* 6px */
	--radius-lg: 0.5rem; /* 8px */
	--radius-xl: 0.75rem; /* 12px */
	--radius-2xl: 1rem; /* 16px */
	--radius-3xl: 1.5rem; /* 24px */
	--radius-full: 9999px; /* 完全圆角 */

	/* ===========================================
	 * 5. 阴影系统
	 * =========================================== */

	--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

	/* ===========================================
	 * 6. 动画系统
	 * =========================================== */

	/* 持续时间 */
	--duration-75: 75ms;
	--duration-100: 100ms;
	--duration-150: 150ms;
	--duration-200: 200ms;
	--duration-300: 300ms;
	--duration-500: 500ms;
	--duration-700: 700ms;
	--duration-1000: 1000ms;

	/* 缓动函数 */
	--ease-linear: linear;
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

	/* 常用过渡组合 */
	--transition-fast: var(--duration-150) var(--ease-out);
	--transition-base: var(--duration-300) var(--ease-out);
	--transition-slow: var(--duration-500) var(--ease-out);
	--transition-spring: var(--duration-300) var(--ease-spring);

	/* ===========================================
	 * 7. Z-index 层级系统
	 * =========================================== */

	--z-0: 0;
	--z-10: 10;
	--z-20: 20;
	--z-30: 30;
	--z-40: 40;
	--z-50: 50;
	--z-modal: 1000;
	--z-popover: 1100;
	--z-tooltip: 1200;
	--z-notification: 1300;

	/* ===========================================
	 * 8. 断点系统 (响应式)
	 * =========================================== */

	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;

	/* ===========================================
	 * 9. 透明度系统
	 * =========================================== */

	--opacity-0: 0;
	--opacity-5: 0.05;
	--opacity-10: 0.1;
	--opacity-20: 0.2;
	--opacity-25: 0.25;
	--opacity-30: 0.3;
	--opacity-40: 0.4;
	--opacity-50: 0.5;
	--opacity-60: 0.6;
	--opacity-70: 0.7;
	--opacity-75: 0.75;
	--opacity-80: 0.8;
	--opacity-90: 0.9;
	--opacity-95: 0.95;
	--opacity-100: 1;

	/* ===========================================
	 * 10. 毛玻璃效果
	 * =========================================== */

	--backdrop-blur-sm: blur(4px);
	--backdrop-blur-base: blur(8px);
	--backdrop-blur-md: blur(12px);
	--backdrop-blur-lg: blur(16px);
	--backdrop-blur-xl: blur(24px);

	/* ===============================
	 * ⚠️ 以下为旧版本配置 (Legacy Configuration) - 保留以确保兼容性
	 * ===============================
	 * 注意：如有冲突，以上方新版本配置为准
	 * 此部分将在未来版本中逐步迁移或移除
	 */

	/* ===============================
	 * 基础色彩变量 (Legacy)
	 * =============================== */
	--primary-color: #007bff; /* 主要品牌色 - 蓝色 (Legacy) */
	--secondary-color: #6c757d; /* 次要色 - 中性灰 (Legacy) */
	--light-gray: #f8f9fa; /* 浅灰色 - 用于背景 (Legacy) */
	--dark-gray: #343a40; /* 深灰色 - 用于文本 (Legacy) */
	--text-color: #212529; /* 主要文本颜色 (Legacy) */
	--text-muted: #6c757d; /* 次要文本颜色 (Legacy) */
	--border-color: #dee2e6; /* 边框颜色 (Legacy) */
	--card-bg: #ffffff; /* 卡片背景色 (Legacy) */

	/* 字体系统 - 使用系统默认字体栈 (Legacy) */
	--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

	/* Hero区域背景色 - 深海军蓝 (Legacy) */
	--hero-bg-color: #082442;

	/* ===============================
	 * 主题色彩系统 (Legacy)
	 * 定义了整个应用的颜色主题，支持主题切换
	 * =============================== */

	/* 头部导航栏样式 (Legacy) */
	--theme-header-bg: linear-gradient(
		135deg,
		#f8fafc 0%,
		#e2e8f0 100%
	); /* 头部背景渐变 */
	--theme-header-text: #1e293b; /* 头部主要文本颜色 */
	--theme-header-text-menu: #1e293b; /* 头部菜单文本颜色 */
	--theme-header-text-muted: #94a3b8; /* 头部次要文本颜色 */
	--theme-header-border: rgba(100, 181, 246, 0.2); /* 头部边框颜色 */
	--theme-header-hover: rgba(100, 181, 246, 0.1); /* 头部悬停效果背景 */
	--theme-header-menu-bg: #f8fafc; /* 头部菜单背景 */
	--theme-header-text-menu-active: #94a3b8; /* 激活状态菜单文本 */
	--theme-header-text-menu-active-bg: rgba(
		59,
		130,
		246,
		0.1
	); /* 激活状态菜单背景 */
	--theme-header-text-menu-hover: #3b82f6; /* 菜单悬停文本颜色 */
	--theme-header-text-menu-hover-bg: rgba(
		100,
		181,
		246,
		0.1
	); /* 菜单悬停背景 */

	/* 页脚样式 (Legacy) */
	--theme-footer-bg: linear-gradient(
		135deg,
		#f8fafc 0%,
		#e2e8f0 100%
	); /* 页脚背景渐变 */
	--theme-footer-text: #1e293b; /* 页脚主要文本 */
	--theme-footer-text-muted: #64748b; /* 页脚次要文本 */
	--theme-footer-border: #e2e8f0; /* 页脚边框 */
	--theme-footer-hover: rgba(59, 130, 246, 0.05); /* 页脚悬停效果 */

	/* 品牌强调色 (Legacy) */
	--theme-accent: #3b82f6; /* 品牌强调色 - 天蓝色 */
	--theme-accent-hover: #42a5f5; /* 强调色悬停状态 */

	/* 内容区域样式 (Legacy) */
	--theme-content-bg: linear-gradient(
		135deg,
		#f8fafc 0%,
		#e2e8f0 100%
	); /* 内容区背景 */
	--theme-content-text: #1e293b; /* 内容主要文本 */
	--theme-content-text-muted: #64748b; /* 内容次要文本 */
	--theme-content-title: #3b82f6; /* 内容标题颜色 */
	--theme-content-border: #e2e8f0; /* 内容区边框 */
	--theme-content-hover: rgba(59, 130, 246, 0.05); /* 内容区悬停效果 */

	/* 卡片组件样式 (Legacy) */
	--theme-card-bg: rgba(255, 255, 255, 0.9); /* 卡片背景 - 半透明白色 */
	--theme-card-border: rgba(30, 41, 59, 0.2); /* 卡片边框 */
	--theme-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 卡片默认阴影 */
	--theme-card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15); /* 卡片悬停阴影 */
	--theme-card-footer-bg: rgba(248, 250, 252, 0.8); /* 卡片底部背景 */

	/* Hero 主视觉区域 (Legacy) */
	--theme-hero-bg: linear-gradient(
		135deg,
		#f8fafc 0%,
		#e2e8f0 100%
	); /* Hero背景 */
	--theme-hero-overlay: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.1)
	); /* Hero遮罩层 */

	/* 特色功能标签和图标 (Legacy) */
	--theme-feature-bg: rgba(248, 250, 252, 0.8); /* 特色功能背景 */
	--theme-icon-bg: rgba(59, 130, 246, 0.1); /* 图标背景 */
	--theme-icon-bg-hover: rgba(59, 130, 246, 0.2); /* 图标悬停背景 */

	/* 图片和覆盖层效果 (Legacy) */
	--theme-image-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* 图片阴影 */
	--theme-overlay-bg: rgba(0, 0, 0, 0.6); /* 覆盖层背景 */

	/* 导航组件样式 (Legacy) */
	--theme-nav-bg: rgba(255, 255, 255, 0.9); /* 导航背景 */
	--theme-nav-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 导航阴影 */
	--theme-nav-highlight: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.4),
		transparent
	); /* 导航高亮效果 */

	/* 按钮组件样式系统 (Legacy) */
	--theme-button-primary-bg: #3b82f6; /* 主要按钮背景 */
	--theme-button-primary-bg-hover: #2563eb; /* 主要按钮悬停背景 */
	--theme-button-primary-text: #ffffff; /* 主要按钮文本 */
	--theme-button-secondary-bg: #f3f4f6; /* 次要按钮背景 */
	--theme-button-secondary-bg-hover: #e5e7eb; /* 次要按钮悬停背景 */
	--theme-button-secondary-text: #374151; /* 次要按钮文本 */
	--theme-button-outline-border: #d1d5db; /* 边框按钮边框 */
	--theme-button-outline-text: #374151; /* 边框按钮文本 */
	--theme-button-outline-hover-bg: #f9fafb; /* 边框按钮悬停背景 */
	--theme-button-shadow-hover: 0 8px 25px rgba(59, 130, 246, 0.25); /* 按钮悬停阴影 */
	--theme-button-ghost-bg: rgba(248, 250, 252, 0.8); /* 幽灵按钮背景 */

	/* 区域背景变体 (Legacy) */
	--theme-section-alt-bg: rgba(248, 250, 252, 0.5); /* 替代区域背景 */

	/* 表单组件样式 (Legacy) */
	--theme-input-bg: rgba(255, 255, 255, 0.8); /* 输入框背景 */
	--theme-input-border: rgba(203, 213, 225, 0.6); /* 输入框边框 */
	--theme-input-border-focus: #3b82f6; /* 输入框聚焦边框 */
	--theme-input-text: #1e293b; /* 输入框文本 */
	--theme-input-placeholder: #9ca3af; /* 输入框占位符 */
	--theme-input-disabled-bg: #f9fafb; /* 禁用输入框背景 */
	--theme-input-disabled-text: #9ca3af; /* 禁用输入框文本 */

	/* 表格组件样式 (Legacy) */
	--theme-table-bg: rgba(255, 255, 255, 0.8); /* 表格背景 */
	--theme-table-header-bg: rgba(100, 181, 246, 0.1); /* 表格头部背景 */
	--theme-table-header-text: #374151; /* 表格头部文本 */
	--theme-table-border: rgba(203, 213, 225, 0.6); /* 表格边框 */
	--theme-table-row-hover: rgba(59, 130, 246, 0.05); /* 表格行悬停 */
	--theme-table-row-selected: #eff6ff; /* 表格行选中 */

	/* 分割线样式 (Legacy) */
	--theme-divider: #e5e7eb; /* 标准分割线 */
	--theme-divider-light: #f3f4f6; /* 浅色分割线 */

	/* 提示和选中区域 (Legacy) */
	--theme-tips-bg: rgba(59, 130, 246, 0.05); /* 提示区域背景 */
	--theme-selected-elements-bg: rgba(248, 250, 252, 0.8); /* 选中元素背景 */

	/* ===============================
	 * 全局尺寸系统 (Legacy)
	 * 定义统一的字体大小、行高、圆角、间距等
	 * =============================== */
	--global-font-size: 14px; /* 全局基础字体大小 */
	--global-line-height: 1.6; /* 全局行高 */
	--global-border-radius: 6px; /* 标准圆角 */
	--global-border-radius-small: 4px; /* 小圆角 */
	--global-border-radius-large: 12px; /* 大圆角 */

	/* 间距系统 - 遵循 4px 基础网格 (Legacy) */
	--global-spacing-xs: 4px; /* 超小间距 */
	--global-spacing-sm: 8px; /* 小间距 */
	--global-spacing-md: 16px; /* 中等间距 */
	--global-spacing-lg: 24px; /* 大间距 */
	--global-spacing-xl: 32px; /* 超大间距 */

	/* ===============================
	 * 动画系统 (Legacy)
	 * 定义统一的过渡效果和缓动函数
	 * =============================== */
	--transition-fast: 0.15s ease; /* 快速过渡 - 用于小元素 */
	--transition-normal: 0.3s ease; /* 标准过渡 - 最常用 */
	--transition-slow: 0.5s ease; /* 慢速过渡 - 用于大元素 */
	--transition-spring: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性过渡 */

	/* ===============================
	 * 阴影系统 (Legacy)
	 * 定义统一的阴影效果层级
	 * =============================== */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 微阴影 */
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 中等阴影 */
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 大阴影 */
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04); /* 超大阴影 */

	/* ===============================
	 * 渐变系统 (Legacy)
	 * 从 conductivity.html 提取的渐变样式
	 * =============================== */

	/* 背景渐变 - 深色/浅色主题 */
	--gradient-bg-dark: black; /* 深色主题背景 */
	--gradient-content-dark: linear-gradient(
		135deg,
		#0c1525 0%,
		#1a2332 100%
	); /* 深色内容区渐变 */
	--gradient-bg-light: white; /* 浅色主题背景 */
	--gradient-content-light: linear-gradient(
		135deg,
		#f8fafc 0%,
		#e2e8f0 100%
	); /* 浅色内容区渐变 */

	/* 标题渐变 - 使用品牌色 #3b82f6 */
	--theme-gradient-title: linear-gradient(
		135deg,
		#3b82f6 0%,
		#3b82f6 50%,
		#3b82f6 100%
	); /* 主题标题渐变 */
	--gradient-title: linear-gradient(
		135deg,
		#3b82f6 0%,
		#3b82f6 50%,
		#3b82f6 100%
	); /* 通用标题渐变 */
	--gradient-divider: linear-gradient(90deg, #3b82f6, #3b82f6); /* 分割线渐变 */

	/* 按钮和标签渐变效果 */
	--theme-gradient-primary: linear-gradient(
		135deg,
		#3b82f6,
		#3b82f6
	); /* 主要渐变 */
	--gradient-primary: linear-gradient(
		135deg,
		#3b82f6,
		#3b82f6
	); /* 通用主要渐变 */
	--gradient-element-tag: linear-gradient(
		135deg,
		#3b82f6,
		#3b82f6
	); /* 元素标签渐变 */

	/* 结果卡片渐变 */
	--gradient-result-card: linear-gradient(
		135deg,
		rgba(100, 181, 246, 0.1),
		rgba(66, 165, 245, 0.05)
	); /* 结果卡片背景渐变 */

	/* 毛玻璃效果 (Legacy) */
	--backdrop-blur: blur(10px); /* 背景模糊效果 */

	/* ===============================
	 * 透明度和阴影系统 (Legacy)
	 * 用于不同主题下的阴影和交互效果
	 * =============================== */

	/* 卡片阴影 - 深色/浅色主题 */
	--shadow-card-dark: 0 8px 32px rgba(0, 0, 0, 0.3); /* 深色主题卡片阴影 */
	--shadow-card-light: 0 8px 32px rgba(0, 0, 0, 0.1); /* 浅色主题卡片阴影 */

	/* 交互状态透明度控制 */
	--opacity-hover-light: 0.1; /* 浅色主题悬停透明度 */
	--opacity-hover-dark: 0.15; /* 深色主题悬停透明度 */
	--opacity-border-light: 0.2; /* 浅色主题边框透明度 */
	--opacity-border-dark: 0.3; /* 深色主题边框透明度 */

	/* 周期表专用变量 (Legacy) */
	--ptable-bg-normal: #f4f6fa;
	--ptable-bg-highlight: #3b82f6;
	--ptable-bg-selected: #10b981;
	--ptable-text-normal: #222;
	--ptable-text-muted: #b0b4ba;
	--ptable-text-highlight: #fff;
	--ptable-text-selected: #fff;
	--ptable-border: #e3e8f0;
}

/* ===============================
 * 深色主题周期表专用变量 (Legacy)
 * =============================== */
body.dark {
	--ptable-bg-normal: #232a36;
	--ptable-bg-highlight: #3b82f6;
	--ptable-bg-selected: #10b981;
	--ptable-text-normal: #fff;
	--ptable-text-muted: #b0b4ba;
	--ptable-text-highlight: #fff;
	--ptable-text-selected: #fff;
	--ptable-border: #2d3642;
}
